<script setup lang="ts">
import { ref } from "vue";

const date = ref(new Date());

const getDayOfWeek = (day) => {
  const days = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
  return days[day];
};

const formatTimeUnit = (unit) => {
  return unit.toString().padStart(2, "0");
};

setInterval(() => {
  date.value = new Date();
}, 1000);
</script>

<template>
  <div class="top-time">
    <p>{{ date.getFullYear() }}年{{ date.getMonth() + 1 }}月{{ date.getDate() }}日</p>
    <p>
      {{ getDayOfWeek(date.getDay()) }}&nbsp;&nbsp;{{
        formatTimeUnit(date.getHours())
      }}:{{ formatTimeUnit(date.getMinutes()) }}:{{ formatTimeUnit(date.getSeconds()) }}
    </p>
  </div>
</template>

<style scoped>
.top-time {
  line-height: 14px;
  font-size: 18px;
  color: #fff;
  padding: 12px 30px 0 0;
}
</style>
